<template>
	<div class="movie">
		<section id="movie_showing" v-for="list in centen">
			<header>
				<h2>{{list.subject_collection.name}}</h2>
				<span>更多</span>
			</header>
			<div class="section-content">
                <ul class="row items">
				    <li class="item item__movie" v-for="item in list.subject_collection_items">
		                <a href="/movie/subject/26607693?refer=home">
			                <div class="item-poster" :style="'background-image: url('+item.cover.url+')'">
			                </div>
			                <span class="item-title">{{item.title}}</span>
			                <div class="item-rating">
			                    <div class="rank">
	                                <span class="rating-stars" data-rating="4.3">
		                                <span class="rating-star rating-star-small-full"></span>
		                                <span class="rating-star rating-star-small-full"></span>
		                                <span class="rating-star rating-star-small-full"></span>
		                                <span class="rating-star rating-star-small-full"></span>
		                                <span class="rating-star rating-star-small-gray"></span>
	                                </span>
	                                 <span>8.6</span>
			                    </div>
			                </div>
		            	</a>
				    </li>
				</ul>
            </div>
		</section>
	</div>
</template>
<script>
	export default{
		name:"movie",
		data(){
			return{
				centen:[]
			}
		},
		created(){
			this.axios({
				method:"GET",
				url:'./static/json/movie.json',
			})
			.then((res)=>{
				this.centen=res.data
			})
		}
	}
</script>
<style scoped>
	* {
	    -webkit-tap-highlight-color: rgba(255,0,0,0);
	}
	.movie{padding-top: 0.47rem;}
	section:first-child {padding-top: 10px;}
	section h2 {display: inline-block;min-width: 4em;margin-bottom: 0;font-size: 0.18rem;color: #111;padding-left: 0;padding-bottom: 0;font-size:0.17rem;
	}
	section header{padding: 0 0.17920rem;height: 0.24rem;line-height: 0.24rem}
	section header span {float: right;font-size: 0.14rem;line-height: 0.24rem;color: #42bd56;}
	section .section-content {margin-bottom: -0.2rem;}
	.items { font-size: 0;white-space: nowrap;overflow-x: auto;-webkit-overflow-scrolling: touch;}
	.row {padding: 0.15rem 0 0.43rem 0;}
	.item {display: inline-block;vertical-align: top; width: 1rem;text-align: center;margin-left: 0.07680rem;}
	.item:first-child {margin-left: 0.17920rem;}
	.item:last-child {margin-right:  0.17920rem;}
	.item-poster {width: 100%;overflow: hidden;height: 1.42844rem;background-size: cover;background-position: center;}
	.item-title{font-size: 0.15rem; max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;display: block;margin-top: 0.096rem;line-height: 0.15rem;color: #111;}
	.item-rating{color: #aaa;line-height: 0.15rem;margin-top: 0.048rem;font-size: .072rem;}
	.rating-stars {display: inline-block;vertical-align: middle;font-size: 0;}
	.rating-stars .rating-star {
	    display: inline-block;
	    margin-right: 1px;
	    background-color: transparent;
	    background-repeat: no-repeat;
	}
	.rating-star-small-full, .rating-star-small-half, .rating-star-small-gray {
	    width: 0.1rem;
	    height: 0.1rem;
	    background-size: 0.1rem 0.1rem;
	}
	.rating-stars .rating-star {
	    display: inline-block;
	    margin-right: 0.01rem;
	    background-color: transparent;
	    background-repeat: no-repeat;
	}
	.rating-star-small-full {
	    background-image: url('../../../static/img/xiaoxinxin.png');
	}
	.rating-star-small-gray {
	    background-image: url('../../../static/img/huisexiaoxinxin.png');
	}
</style>